﻿<html>
<head>
<meta charset="utf-8">
<title>帮助中心</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="js/fontSize.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>

<div class="page" id="app">

  <div class="help-list" v-if='!mainFlag'>
    <div class="list">
      <span :class='item.id==curList ? "cur" : ""' v-for='(item, index) in listArr' v-text='item.helperClass' @click='getList(item.id)'></span>
    </div>
    <div class="list-box">
      <a href="#showShareButton" :class='item.id==curId ? "cur" : ""' v-for='(item, index) in dataArr' v-text='item.helperTitle' @click='showMain(index)'></a>
    </div>
  </div>
  <div class="help-main" v-if='mainFlag'>
    <h3>{{mainTit}}</h3>
    <div class="content" v-html='mainCon'></div>
  </div>

</div>

<script src="js/axios.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    type: 1,
    curList: 1,
    curId: 11,
    listArr: [
      // {id:1, helperClass: '分类1'},
      // {id:2, helperClass: '分类2'}
    ],
    dataArr: [
      // {id: 11, language: 0, helperTitle: '已确认收货的订单是失效了？', helperDetail: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'}
    ],
    mainFlag: false,
    mainTit: '',
    mainCon: ''
  },
  methods: {
    goBack:function(){
      if(this.mainFlag){
        this.mainFlag = false
      }
      else{
        //调用原生方法返回
      }
    },
    share:function(){
      var url = window.location.href;
      url = url + '?id='+this.curId;
      //得到分享的url
    },
    showMain:function(index){
      var newArr = this.dataArr;
      this.mainTit = newArr[index].helperTitle;
      this.mainCon = newArr[index].helperDetail;
      this.mainFlag = true;
    },
    getList:function(id){
      this.curList = id;
      var self = this;
      axios.get(api + "/front/content/helper", {
        params: {
          classId: id
        }
      })
      .then(function (res) {
        if(res.data.code == 0){
          self.dataArr = res.data.data;
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },
  created:function(){
    var self = this;
    //self.getList(0);
    var url = window.location.href;
    var id = url.split("id=")[1];
    if(id){
      this.showMain(id)
    }
    //分类
    axios.get(api + "/front/content/helperclass", {
      params: {

      }
    })
    .then(function (res) {
      if(res.data.code == 0){
        self.listArr = res.data.data;
        var thisId = res.data.data[0].id;
        self.getList(thisId);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  },
  mounted:function(){

  }
})
</script>

</body>
</html>